<template>
<!-- 充值 -->
<div id="withdraw">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<h1 class="mui-title">{{routerTitle}}</h1>
	</header>
	<div class="mui-content">
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>提现方式</label>
				<select v-model="way" :style="way==0?'color:#999':''" class="mui-input-clear">
					<option value="0">请下拉选择</option>
					<!-- <option value="weChat">微信</option>
					<option value="alipay">支付宝</option> -->
					<option value="bank">银行卡</option>
				</select>
			</div>
			<div class="mui-input-row">
				<label>提现钱包</label>
				<select v-model="classify" :style="classify==0?'color:#999':''" class="mui-input-clear">
					<option value="0">请下拉选择</option>
					<option value="1">充值钱包</option>
					<option value="3">盈利钱包</option>
					<option value="4">流水钱包</option>
					<option value="6">团队分红</option>
				</select>
			</div>
			<!-- <div class="mui-input-row">
				<label>提现账号</label>
				<input type="text" v-model="account" class="mui-input-clear" placeholder="请输入账号">
			</div> -->
			<!-- <div class="mui-input-row">
				<label>真实姓名</label>
				<input type="text" v-model="truename" class="mui-input-clear" placeholder="请输入姓名">
			</div> -->
			<div class="mui-input-row">
				<label>银行卡号</label>
				<input v-if="banks.length==0" readonly type="text" class="mui-input-clear" placeholder="暂未绑定银行卡" @tap="$router.push({path:'/bankList'})">
				<select v-if="banks.length>0" v-model="bankId" class="mui-input-clear" :style="bankId==0?'color:#999':''">
					<option value="0">请下拉选择</option>
					<option v-for="item in banks" :value="item.id">{{item.bankCode}}</option>
				</select>
			</div>
			<div class="mui-input-row">
				<label>提现金额</label>
				<input type="number" v-model="money" class="mui-input-clear" placeholder="请输入金额（元）">
			</div>
			<div class="mui-input-row">
				<label>提现密码</label>
				<input type="password" v-model="withdrawPassword" class="mui-input-clear" placeholder="请输入提现密码">
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary" @tap="sureWithdraw">确认</button>
				<button type="button" class="mui-btn mui-btn-danger" @tap="way='0';money='';classify='0'">取消</button>
			</div>
		</form>
		<div style="text-align:center;margin:20px 0 0 0;color:#888;font-size:3vw;text-decoration:underline;"><span @tap="resetWithdrawPassword">修改提现密码</span></div>
	</div>
</div>
</template>

<script>
import {withdraw,withdrawRemarkCodeGet,updateWithdrawPassword,findBanksByUser} from "@/api/my"
export default{
	name:"withdraw",
	data(){
		return{
			way:"0",
			classify:"0",
			money:"",
			account:"",
			bankId:"0",
			curRemarkCode:null,
			withdrawPassword:"",
			banks:[]
		}
	},
	watch:{
		curRemarkCode(val){
			if(val){
				mui.hideLoading()
			}
		}
	},
	mounted(){
		mui.showLoading()
		this.getRemarkCode()
		mui.showLoading("获取银行卡列表", "div");
		findBanksByUser().then(res => {
			this.banks = res
			mui.hideLoading()
		})
		if(this.$route.query.businessMoney) this.classify="6"
	},
	methods:{
		getRemarkCode(){	//请求备注码
			withdrawRemarkCodeGet().then(res=>{	//请求备注码
				if(res.remarkCode=="repeat"){	//未请求到 递归
					this.getRemarkCode()
				}else{
					this.curRemarkCode = res.remarkCode
				}
			})
		},
		sureWithdraw(){
			let data = {
				way:this.way,
				classify:this.classify,
				money:this.money,
				// account:this.account,
				// truename:this.truename,
				bankId:this.bankId,
				// bankBranch:this.bankBranch,
				remarkCode:this.curRemarkCode,
				withdrawPassword:this.withdrawPassword
			};
			
			if(data.way==0){
				mui.toast("请选择提现方式")
				return;
			}
			
			if(data.classify==0){
				mui.toast("请选择提现钱包")
				return;
			}
			
			// if(data.account==""){
			// 	mui.toast("请输入账号")
			// 	return;
			// }
			
			// if(data.truename==""){
			// 	mui.toast("请输入真实姓名")
			// 	return;
			// }
			
			if(data.bankId=="0"){
				mui.toast("请选择银行卡")
				return;
			}
			
			// if(data.way=="bank" && data.bankBranch==""){
			// 	mui.toast("请输入开户支行名称")
			// 	return;
			// }
			
			if(data.money=="" || data.money==0){
				mui.toast("提现金额有误")
				return;
			}
			
			if(data.withdrawPassword==""){
				mui.toast("请输入提现密码")
				return;
			}
			
			withdraw(data).then(res=>{
				if(res.message){
					mui.toast(res.message)
				}
				if(res==200){
					mui.toast("申请提现成功！")
					this.$router.replace({path:'/withdrawRecord'})
				}
			})
		},
		//修改提现密码
		resetWithdrawPassword(){
			mui.prompt('','请输入旧密码','修改提现密码',['取消','确认'],callback,'div')
			document.querySelector('.mui-popup-input input').type='password' 
			document.querySelector('.mui-popup-text').remove()
			document.querySelector('.mui-popup-input').innerHTML = '<input type="password" autofocus="" placeholder="请输入旧密码"><input type="password" placeholder="请输入新密码">'
			function callback(e){
				if(e.index==0) return;
				
				mui.showLoading("修改中..", "div");
				var passData = {
					oldPassword:mui('.mui-popup-input>input')[0].value,
					password:mui('.mui-popup-input>input')[1].value
				}
				
				//验证
				if(passData.oldPassword.trim()=='' || passData.password.trim()==''){
					mui.hideLoading()
					mui.alert("旧密码和新密码为必填项！")
					return;
				}
				
				//请求
				updateWithdrawPassword(passData).then(res=>{
					mui.hideLoading()
					if(res==200){
						mui.toast("修改成功")
					}else if(res.message){
						mui.toast(res.message)
					}else{
						mui.toast("系统错误")
					}
				})
			}
		}
	}
}
</script>

<style scoped>
.mui-button-row button{
	margin: 0 5px;
}
.mui-input-row label{
	text-align: right;
}
</style>
